<template>
      <a-form-item
      class="selectTime"
      :class="[hasError ? 'hhg-form-item-has-error' : '']"
	:label="labelName"
	:name="name"
	:rules="rules">
            <!-- 日期输入框 -->
            <a-date-picker :value="hhgValue" :showTime="hhgShowTime" v-bind="attrs" @change="$emit('update:showTimer', dayjs($event).format(hhgFormat))">
                  <template #suffixIcon></template>
            </a-date-picker>
      </a-form-item>
</template>

<script setup>
import { onMounted, defineProps, useAttrs, ref, computed } from 'vue'
//dayjs
import dayjs from 'dayjs'
//父组件传过来的值
const props = defineProps({
	config: {
            type: Object,
            default: ()=> {}
      }
})


//属性穿透
const attrs = useAttrs()
const labelName = ref(props.config.labelName)
const name = ref(props.config.name)
const rules = ref(props.config.rules)
const hasError = ref(props.config.hasError ? props.config.hasError : false)
const hhgFormat = ref(props.config.format)
const hhgShowTime = ref(props.config.showTime ? props.config.showTime : false)
const hhgValue = ref('')
hhgValue.value = computed(()=> {
      if (props.config.value) {
            return dayjs(props.config.value, hhgFormat.value).isValid() ? dayjs(props.config.value, hhgFormat.value) : null
      } else {
            return props.config.value
      }
      
})

// mounted
onMounted(() => {
})

</script>
<style scoped lang="scss">
</style>